<template>
    <div>
        <div v-for='item in tableData' style='float: left;margin: 10px'>
        <el-card class='el-card'>
            <img :src='"http://localhost:8083/farm/"+item.image' style='width: 200px' alt=''>
            <div>
                <span>{{item.yuliu1}}</span>
                <br>
                    <time class='time'>价格:{{ item.jine }}</time>
                <br>
                    <el-button type='text' class='button' v-on:click='pay(item.id)'>购买</el-button>

            </div>
        </el-card>
        </div>
    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/orders/list1").then(res=>{
            this.tableData =res
        })
    },
    data() {
        return {
            currentDate: '2020-10-12',
            tableData:[]
        }
    },
    methods: {
        pay(id){
            this.$confirm('确定购买吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get("/v1/orders/pay?id="+id).then(res=>{
                    alert("购买成功")
                    this.$http.get("/v1/orders/list1").then(res=>{
                        this.tableData =res
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    }
}
</script>

<style scoped>
.el-card{
    width: 300px;
    height: 350px;
}


</style>
